<template>
    <div style="padding-top:46px">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="手机绑定" fixed>
        <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
        </van-nav-bar>
        <div class="ui_login_mode">
            <div class="login_mobile_number">
                <!-- <i class="iconfont icon-shouji"></i> -->
                <span class="span_iconfont">+86 <i class="iconfont icon-xiala"></i></span>
                <div class="login_input_box">
                    <input
                    class="login_input"
                    type="text"
                    placeholder="请输入手机号码"
                    maxlength="11"
                    v-model="mobileNo"
                    @blur="mobileNoInputBlur"
                    @input="mobileNoInputChange"
                    style="border-left:1px solid #e1e1e1">
                    <SmsCode :mobileNoIsValid="mobileNoIsValid" :mobileNo="mobileNo" :codeType="mobileNo ? 'mobilePhone' : 'bindingCell'"></SmsCode>
                </div>
            </div>
            <div class="login_password">
                <!-- <i class="iconfont icon-Password"></i> -->
                <span class="span_iconfont">验证码</span>
                <div class="login_input_box">
                    <input
                    class="login_input"
                    type="text"
                    placeholder="请输入验证码"
                    maxlength="6"
                    v-model="smsCode">
                </div>
            </div>
        </div>
        <div style="margin:15px 30px; color: #333;">绑定新手机后，原手机不能作为登陆凭证</div>
        <div class="login_submit">
                <button class="login_btn"
                        :class="mobileNoIsValid ? '' : 'disable'"
                        :disabled="!mobileNoIsValid"
                        @click="submitBind"
                        >
                    绑定
                </button>
            </div>
        <ErrorPopup :isError="isError" :errorMessage="errorMessage"></ErrorPopup>
    </div>
</template>
<script type="text/babel">
    import SmsCode from '../../component/login/SmsCode';
    import ErrorPopup from '../../component/login/ErrorPopup';
    import { mapGetters } from "vuex";
    import { changeBeeUserBindPhone } from "services/beeUser";

    export default {
      name: 'setphone',
      components: { SmsCode, ErrorPopup },
      props: {
        codeType: String
      },
      data() {
        return {
          mobileNo: '',
          smsCode: '',
          isError: false,
          errorMessage: '',
          mobileNoIsValid: true
        };
      },
      computed: {
        ...mapGetters(["userInfo"])
      },
      methods: {
        back(){
          this.$router.go(-1);
        },
        changeLoginMode() {
          this.$emit('onChangeLoginMode', 'password');
        },
        mobileNoInputChange() {
          this.mobileNoIsValid = this.validateMobileNo();
        },
        mobileNoInputBlur() {
          if (!this.validateMobileNo()) {
              this.isError = true;
              this.errorMessage = '请填写正确的手机号码';
              setTimeout(() => {
                  this.isError = false;
                  this.errorMessage = '';
              }, 3000);
          }
        },
        validateMobileNo() {
          const mobileNoReg = /^[1][3-9][0-9]{9}$/;
          return mobileNoReg.test(this.mobileNo);
        },
        submitBind() {
          const { userInfo:{ userNo }, mobileNo } = this;
          changeBeeUserBindPhone({ mobileNo: this.mobileNo, code: this.smsCode, codeType: mobileNo ? 'mobilePhone' : 'bindingCell', userNo }).then(() => {
            this.$toast({
              message: '绑定手机号成功！',
              duration: 1000,
              forbidClick: true
            })
            // 弹窗结束重新获取数据
            setToastTimer(() => {
              this.$store.dispatch('refreshUserInfo', this.userInfo);
              this.$router.replace('/setmessage');
            }, 1000);
          }).catch((error) => {
            this.$toast({
              message: error.response.data.message,
              duration: 1000,
              forbidClick: true
            })
          });
        }
      }
}
</script>
<style scoped lang="less">
    .ui_login_mode {
        margin-top:30px;
        width: 100%;
        background:#fff;
        .login_mobile_number{
        border-bottom: 1px solid #e1e1e1;
        }
    .login_mobile_number,
    .login_password {
      display: flex;
      align-items: center;
      height: 80px;
      padding: 0 30px;
      .span_iconfont {
        flex: 0 0 auto;
        margin-right: 10px;
        font-size: 32px;
        .iconfont{
            font-size: 32px;
        }
      }
    }
    .login_mode {
      padding: 0 70px;
      .login_mode_btn {
        color: #333;
        font-size: 26px;
      }
    }
    .login_input_box {
      display: flex;
      flex: 1 0 auto;
      height: 100%;
      border-radius: unset;
      .login_input {
        flex: 1 0 auto;
        height: 100%;
        padding: 20px 0 20px 30px;
        outline: none;
        border: none;
        border-radius: unset;
        background: transparent;
        font-size: 30px;
      }
    }
  }
  .login_submit {
      margin-bottom: 40px;
      padding: 0 30px;
      .login_btn {
        width: 100%;
        height: 90px;
        outline: none;
        border: none;
        border-radius: 45px;
        background-color: #f7a427;
        color: #fff;
        font-size: 36px;
        &.disable {
          background-color: #fbcb82;
        }
      }
    }
</style>
